<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Carrito 2014</title>
        <link href="../media/dataTables/demo_page.css" rel="stylesheet" type="text/css" />
        <link href="../media/dataTables/demo_table.css" rel="stylesheet" type="text/css" />
        <link href="../media/dataTables/demo_table_jui.css" rel="stylesheet" type="text/css" />
        <link href="../media/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
        <link href="../media/themes/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" media="all" />
        <script src="../scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
        <script src="../scripts/jquery.dataTables.min.js" type="text/javascript"></script>
        <script src="../scripts/configuration.jquery.dataTables.editable.js" type="text/javascript"></script>
        <script src="../scripts/jquery.jeditable.js" type="text/javascript"></script>
        <script src="../scripts/jquery.validate.js" type="text/javascript"></script>
        <script src="../scripts/jquery-ui.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(document).ready(function () {

        	var oTable = $('#configuracionesTable').dataTable();
        	oTable.fnDestroy();
            
            $("#configuracionesTable").dataTable({
                "bServerSide": true,
                "sAjaxSource": "../Configuracion/ConfiguracionList",
                "bProcessing": true,
                "sPaginationType": "full_numbers",
                "bJQueryUI": true,
                "aoColumns": [
                              {  "sName": "ID",
                                 "bSearchable": false,
                                 "bSortable": false,
                                 "bVisible": false
                                     },
		                      { "sName": "Valor", "sWidth": "450px" },
		                      { "sName": "Nro Grupo", "sWidth": "50px" },
		                      { "sName": "Tipo Servicio", "sWidth": "250px" }
                     ]
         }).makeEditable({
        	    "aoColumns": [
        	                  {
        	                      "cssclass": "required", 
        	                  },
        	                  {
        	                      "cssclass": "required", "width": "400px",
        	                  },//null for read-only columns
        	                  {
        	                	  "cssclass": "required", "sWidth": "400px",
        	                  }
        	              ]
        	              });
        });
        </script>
    </head>
    <body id="dt_example">
    	<div align="right"><b style="vertical-align: bottom; padding-right: 0"><img alt="test" src="../images/carrito-configuraciones.png"></div>
		<br>
        <div id="container">
            <div id="demo_jui">
            <button id="btnAddNewRow" value="Ok">Agregar</button> 
    		<button id="btnDeleteRow" value="cancel">Borrar</button>
		        <table id="configuracionesTable" width="100%" class="display">
		            <thead>
		                <tr>
							<th>ID</th>
							<th style="width: 450px">Valor</th>
							<th style="width: 50px">Nro Grupo</th>
							<th style="width: 250px">Tipo Servicio</th>
		                </tr>
		            </thead>
		            <tbody>
		          
		            </tbody>
		        </table>
		    </div>
            
            <form id="formAddNewRow" action="#" title="Agregar Configuraci&oacute;n">
			    <label for="name">ID</label><input type="text" name="id" id="id" rel="0" />
			    <label for="name">Valor</label><input type="text" name="valor" id="valor" rel="1" />
			    <br/>
			    <label for="name">Tipo Servicio</label><input type="text" name="tipoServicio" id="tipoServicio" rel="2"/>
			    <br/>
			    <label for="name">Nro Grupo</label><input type="text" name="nroGrupo" id="nroGrupo" rel="3"/>
			    <br/>         
			</form>

        </div>
    </body>
</html>